<template>
    <div>
        <input type="text" placeholder="请输入搜索内容" v-model="keyValue">
        <ButtonCounter/>
        <ButtonCounter/>
        <ul>
            <li v-for="good in goodsList" :key="good.id">
                <img :src="good.picture" alt="pic" class="good_img">
                <h3>{{good.product}}</h3>
                <p>{{good.price}}</p>
            </li>
        </ul>
    </div>
</template>

<script setup>
import {ref,watch} from 'vue'
import axios from 'axios'
import ButtonCounter from '@/components/ButtonCounter.vue';

const keyValue = ref('') //搜索关键字

const goodsList = ref([]) //搜索数据

/**
 * 自动搜索入口
 */
watch(keyValue, (newValue)=>{
    // 根据搜索关键字调用后端搜索接口
    console.log('newValue ',newValue);
    // 调用网络接口 axios库
    // 1. npm install axios 安装axios
    // 2. 引入  import axios from 'axios'
    // 3. axios({
    //        url:''
    //        method:'GET',
    //        data:{}
    //   }).then(data=>{})

    axios({
        method:'GET',
        url:'http://47.109.74.84:8089/api/shop/search',
        params:{
            keyword:newValue
        }
    }).then(res=>{
        goodsList.value = res.data.resultInfo.list
        console.log('goodsList ',goodsList.value);
    }).catch(err=>{
        console.log('err :',err);
    })
})


</script>

<style lang="css" scoped>
.good_img{
    width: 100px;
    height: 100px;
}
</style>